<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>layui</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../static/vui/css/vui.css">

	<script type="text/javascript" src="../../static/js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="../../static/layer/layer.js"></script>
	<script type="text/javascript" src="../../static/js/jquery.cookie.min.js"></script>
	<script type="text/javascript" src="../../static/js/common.js"></script>

	<style>
		.images-out{
			width: 300px;height: 300px;border:1px solid #dcdcdc;position: relative;top:30px;left:30px;border-radius: 5px;
		}
		.images-file{
			position: absolute;top: 0px;left:15px;width:100px;height:29px;opacity:0;z-index: 3;cursor: pointer;
		}
		.images-content{
			position: absolute;top:0px;left:0px;width: 300px;height: 300px;background-repeat: no-repeat;background-image:none;cursor:move;
		}
		.images-btn{
			position: absolute;top: 310px;left:10px;cursor: pointer;
		}
	</style>
</head>
<body>
<form method="POST" id="form" enctype="multipart/form-data" action="/hrms/stream/upload" target="fileFrame">
	<input type="hidden" name="width" value="300"/>
	<input type="hidden" name="height" value="300"/>
	<input type="hidden" name="top" value="0"/>
	<input type="hidden" name="left" value="0"/>
	<div class="images-out">
		<div id="img" class="images-content"></div>

		<div class="images-btn">
			<input type="file" name="file" onchange="choseFile(this)" class="images-file"/>
			<button class="button" type="button">
				<span>&nbsp;选&nbsp;择&nbsp;图&nbsp;片&nbsp;</span>
			</button>
			<button class="button" type="button" style="margin-left:60px;" id="save">
				<span>&nbsp;提&nbsp;交&nbsp;</span>
			</button>
		</div>

	</div>
</form>

<iframe id="fileFrame" name="fileFrame" width="0" height="0" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>
<script>
function streamHandle(resp){
    console.log(resp);
}

function choseFile(_this){
    var file = _this.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){
        $('#img').css('background-image','url('+e.target.result+')');
    };
}

$(function () {

    var point = {lastPoint:{x:0,y:0},currPoint:{x:0,y:0}};

    $('#save').click(function(){
        if(noBackground()){
            app.alert(layer,'请先选择图片 并调整到满意位置',2);
            return;
        }

        $('input[name="top"]').val(0-point.currPoint.y);
        $('input[name="left"]').val(0-point.currPoint.x);
        $('#form').submit();

	});

	$('#img').mousedown(function(e){
	    if(noBackground()){
	        return;
		}
        point.x = e.clientX;
        point.y = e.clientY;
	});

    $('#img').mouseup(mouseMoveEnd);
    $('#img').mouseout(mouseMoveEnd);


    $('#img').mousemove(function(e){
        if(noBackground()){
            return;
        }
		if(point.x){
            point.currPoint.x = e.clientX-point.x+point.lastPoint.x;
            point.currPoint.y = e.clientY-point.y+point.lastPoint.y;
			$('#img').css({"background-position":point.currPoint.x+"px "+point.currPoint.y+"px"});
		}
    });

    function mouseMoveEnd(){
        if(noBackground()){
            return;
        }
        point.lastPoint.x = point.currPoint.x;
        point.lastPoint.y = point.currPoint.y;
        point.x = 0;
	}

	function noBackground() {
        return $('#img').css('background-image') == 'none';
    }
});

</script>

</body>
</html>